<template>
  <div class="qhbox">
    <van-list
      v-model:loading="loading"
      v-model:error="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
      :immediate-check="false"
    >
      <div class="title">
        <img
          src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/icon_play_e54a507.png"
          alt=""
        />
        <span>{{title}}</span>
      </div>
      <div class="qhcontent">
        <ul class="matter">
          <li v-for="item in typeList" :key="item.nickname" @click="dizhi(item.rid)">
            <lazy-component>
              <img :src="item.roomSrc" alt="" v-lazy="item.roomSrc" />
            </lazy-component>
            <p>{{ item.roomName }}</p>
            <div class="reqi">
              <img
                src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/iconfont-wo_fdcada2.png"
                alt=""
              />
              <span>{{ item.nickname }}</span>
            </div>
            <div class="user">
              <img
                src="https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/hotnum_6b05e5d.png"
                alt=""
              />
              <span>{{ item.hn }}</span>
            </div>
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>
<script>
import { getTypeList } from "@/api/roomList";
export default {
  data() {
    return {
      typeList: [],
      qh: "yz",
      loading: false,
      error: false,
      show:false,
      page:1,
      title:'颜值',
    };
  },
  created() {
    this.qh=this.$route.query.qh,
    this.title=this.$route.query.name,
    this.shuju();
  },
  watch: {
    $route(to, form) {
      console.log(to);
      console.log(form);
      this.title=to.query.name
      this.qh = to.query.qh;
      this.page=1,
      this.typeList=[];
      this.shuju();
    },
  },
  
  methods: {
    onLoad() {
      this.page+=1;
      console.log(this.$route.query.qh); 
      this.shuju();
    },
    async shuju() {
      let params = {
        page:this.page,
        type: this.qh,
        offset: 50,
      };
      let res = await getTypeList(params);
      console.log(res);
       this.typeList = [...this.typeList, ...res.data.list];
       this.loading=false;
    },
    dizhi(id){
     window.location.href=`https://www.douyu.com/room/share/${id}`;   
    }
  },
};
</script>

<style lang="scss" scoped>
.qhbox {
  width: 7.8rem;
  margin-top: 0.4rem;
  .title {
    width: 7.8rem;
    display: flex;
    align-items: center;
    img {
      width: 0.3rem;
      margin-left: 0.1rem;
      margin-top: 0.05rem;
    }
    span {
      font-size: 0.25rem;
      margin-left: 0.1rem;
    }
  }
  .matter {
    width: 7.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 3.7rem;
      margin-top: 0.2rem;
      position: relative;
      .reqi {
        position: absolute;
        bottom: 0.5rem;
        left: 0.1rem;
        img {
          width: 0.3rem;
        }
        span {
          font-size: 0.3rem;
          color: #fff;
        }
      }
      .user {
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
        img {
          width: 0.3rem;
        }
        span {
          font-size: 0.3rem;
          color: #fff;
        }
      }
      img {
        width: 100%;
        border-radius: 0.1rem;
      }
      p {
        font-size: 0.28rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>